<template>
  <div>
    <!-- dialogForm.title -->
    <el-dialog class="taskdialog" title="" :visible.sync="dialogForm.dialogVisible" :width="dialogForm.width"
      :destroy-on-close="true" :center="true" :showClose="false" :close-on-click-modal="false" fullscreen:false>
      <div slot="title" class="dialog-footer" style="display: flex; justify-content: space-between">
        <div class="dialogTitle">
          {{ dialogForm.title }}
          <i :class="followFlag == '0' ? 'el-icon-star-off i2' : 'el-icon-star-on i1'
            " v-if="addEditType == 'update'" @click="followClick">{{ followFlag == "0" ? "关注" : "取消关注" }}</i>
        </div>
        <div>
          <!-- <el-select v-model="form.userId" :disabled="editFlag == 0 && taskId != ''" placeholder="请选择负责人"
                        @change="userChange" style="width:150px;">
                        <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select> -->
          <el-select v-model="form.userId" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            placeholder="请选择负责人" clearable filterable @blur="selectBlur" @clear="selectClear" @change="selectChange"
            style="width: 150px">
            <el-option v-for="item in users" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>

          <el-select v-model="form.urgentState" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            placeholder="请选择紧急程度" style="width: 150px">
            <el-option v-for="item in urgentStates" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>

          <el-button @click="cancel('ruleForm')" class="buttonCl" icon="el-icon-close"></el-button>
        </div>
      </div>
      <el-divider></el-divider>
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="任务类型" :label-width="formLabelWidth" prop="category">
          <el-select v-model="form.category" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            placeholder="请选择" @change="changeCategory">
            <el-option v-for="item in taskTypes" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称" :label-width="formLabelWidth" prop="taskName" v-if="form.category == 1"
          :rules="{ required: true, message: '请填写任务名称', trigger: 'blur' }">
          <el-input v-model="form.taskName" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="规则名称" :label-width="formLabelWidth" prop="taskName" v-else
          :rules="{ required: true, message: '请填写规则名称', trigger: 'blur' }">
          <el-input v-model="form.taskName" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="截止日期" :label-width="formLabelWidth" v-if="form.category == 1" prop="endDate">
          <el-date-picker v-model="form.endDate" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            value-format="yyyy-MM-dd 23:59:59" format="yyyy 年 MM 月 dd 日" type="date" placeholder="选择日期时间"
            :picker-options="pickerEndTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="规则周期" :label-width="formLabelWidth" v-if="form.category == 2" prop="ruleCycle">
          <el-select v-model="form.ruleCycle" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            placeholder="请选择规则周期" @change="changeRuleCycle">
            <el-option v-for="item in ruleCycles" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间" :label-width="formLabelWidth" v-if="form.category == 2 &&
          (form.ruleCycle == '2' ||
            form.ruleCycle == '3' ||
            form.ruleCycle == '4')
          " prop="ruleTime">
          <el-select v-model="form.ruleTime" value-key="value"
            :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1" placeholder="请选择时间" multiple>
            <el-option v-for="item in ruleDates[form.ruleCycle - 2]" :key="item.value" :label="item.label"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择时间" v-show="form.category == 2 && form.ruleCycle == '1'" :label-width="formLabelWidth"
          prop="ruleTime2">
          <el-select v-model="form.ruleTime2" value-key="value"
            :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1" placeholder="请选择时间">
            <el-option v-for="item in ruleDates2" :key="item.value" :label="item.label" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参与人" :label-width="formLabelWidth" prop="categoryUserId">
          <span>{{ categoryUserName }}</span>
          <el-button v-if="editFlag == 1 || taskId == ''" type="primary" size="mini" icon="el-icon-plus"
            @click="selectParticipants"></el-button>
        </el-form-item>
        <el-form-item label="关联项目" :label-width="formLabelWidth" prop="projectId">
          <span>{{ projectName }}</span>
          <el-button v-if="editFlag == 1 || taskId == ''" type="primary" size="mini" icon="el-icon-plus"
            @click="selectProject"></el-button>
        </el-form-item>
        <el-form-item label="任务详情" :label-width="formLabelWidth" prop="content">
          <el-input v-model="form.content" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            placeholder="请输入任务详情" type="textarea" :autosize="{ minRows: 4 }"></el-input>
        </el-form-item>
        <!-- <el-form-item label="任务阶段" :label-width="formLabelWidth" prop="stage">
                    <el-select v-model="form.stage" :disabled="editFlag == 0 && taskId != ''" placeholder="请选择"
                        @change="changeRuleCycle">
                        <el-option v-for="item in taskStages" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item> -->
        <el-form-item label="抄送共享" :label-width="formLabelWidth" prop="shareUserId">
          <span>{{ shareUserName }}</span>
          <el-button type="primary" v-if="editFlag == 1 || taskId == ''" size="mini" icon="el-icon-plus"
            @click="selectShareMan"></el-button>
        </el-form-item>
        <el-form-item label="起始日期" :label-width="formLabelWidth" prop="startDate" v-if="form.category == 1">
          <el-date-picker v-model="form.startDate" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" type="date" placeholder="选择日期"
            :picker-options="pickerStartTime">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="起始日期" :label-width="formLabelWidth" prop="startDate" v-if="form.category == 2">
          <el-date-picker v-model="form.startDate" :disabled="(editFlag == 0 && taskId != '') || deleteFlag == 1"
            value-format="yyyy-MM-dd" format="yyyy 年 MM 月 dd 日" type="date" placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>
      <div slot="footer" class="dialog-footer">
        <div v-if="addEditType == 'update' &&
          (userid == form.userId || userid == createUserId)
          " class="comment">
          <div class="commentInput">
            <el-input v-if="editFlag == 1 || taskId == ''" v-model="commentInput" placeholder="请输入内容"></el-input>
            <el-button v-if="editFlag == 1 || taskId == ''" type="primary" style="margin-left: 10px"
              @click="saveComment">发布</el-button>
          </div>
          <div class="commentList" v-for="(item, index) in taskRecordList">
            <div class="listHeader">
              <div>{{ index + 1 }}楼</div>
              <div>{{ item.userName }}</div>
              <div>{{ item.createTime }}</div>
              <i class="el-icon-close" @click="delComment(item.id)" v-if="editFlag == 1 || taskId == ''"></i>
            </div>
            <div class="listContent">
              {{ item.content }}
            </div>
          </div>
        </div>
        <el-button @click="cancel('ruleForm')">取 消</el-button>
        <el-button type="primary" v-if="editFlag == 1 || taskId == ''" @click="submitTask('ruleForm')"
          :loading="loading">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialog1" width="40%" :destroy-on-close="true" :show-close="false">
      <div class="parDialog">
        <div class="parDialog-tree">
          <el-input placeholder="输入名字查询" v-model="parFilterText">
          </el-input>
          <el-tree ref="parTree" :data="treedata" node-key="id" :props="defaultProps" default-expand-all show-checkbox
            :check-on-click-node="true" @check-change="parCheckChange" :default-checked-keys="parDefaultCheck"
            :filter-node-method="parFilterNode" :check-strictly="systemNodeFlag"></el-tree>
        </div>
        <div class="parDialog-select">
          <div v-if="treeType == 1">
            <div>已选择{{ form.categoryUserId.length }}人</div>
            <div class="people">
              <div v-for="item in categoryUserArray" class="people-width">
                {{ item }}
              </div>
            </div>
          </div>
          <div v-if="treeType == 2">
            <div>已选择{{ form.shareUserId.length }}人</div>
            <div class="people">
              <div v-for="item in shareUserArray" class="people-width">
                {{ item }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="parCancel">取 消</el-button>
        <el-button type="primary" @click="parOk">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog :visible.sync="dialog2" width="40%" :destroy-on-close="true" :show-close="false">
      <div class="parDialog">
        <div class="parDialog-tree">
          <el-input placeholder="输入项目名称查询" v-model="proFilterText">
          </el-input>
          <el-tree ref="proTree" :data="proTreedata" node-key="id" :props="defaultProps" default-expand-all show-checkbox
            :check-on-click-node="true" @check-change="parCheckChange2" :filter-node-method="proFilterNode"
            :default-checked-keys="proDefaultCheck" check-strictly></el-tree>
        </div>
        <div class="parDialog-select">
          <div>已选择{{ form.projectId.length }}个</div>
          <div class="people">
            <div v-for="item in proArray" class="people-width">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="proCancel">取 消</el-button>
        <el-button type="primary" @click="proOk">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  addTaskInfo,
  editTaskInfo,
  getParticipateUserList,
  getBearUserList,
  getTaskDetail,
  stopOrDeleteTaskInfo,
  addTaskRecord,
  delTaskRecord,
  getProjectList,
} from "../../../../service/taskApi";
export default {
  props: ["dialogForm", "taskId"],
  watch: {
    parFilterText(val) {
      this.$refs.parTree.filter(val);
    },
    proFilterText(val) {
      this.$refs.proTree.filter(val);
    },
    taskId: {
      handler: function (newValue, oldValue) {
        this.addEditType = this.taskId === "" ? "add" : "update";
        if (this.addEditType == "update") {
          this.getDetail();
        }
      },
      immediate: true,
    },
    taskName: {
      handler: function (newValue, oldValue) {
        this.$refs["ruleForm"].clearValidate("taskName");
      },
    },
    ruleName: {
      handler: function (newValue, oldValue) {
        this.$refs["ruleForm"].clearValidate("ruleName");
      },
    },
  },
  inject: ["reload"],
  data() {
    return {
      userid: "",
      followFlag: "", //是否关注
      addEditType: "add",
      dialogFormVisible: false,
      formLabelWidth: "100px",
      createUserId: "",
      systemNodeFlag: false,
      form: {
        userId: "", //负责人id
        userName: "", //负责人
        urgentState: "", //紧急状态
        category: "", //任务类型
        endDate: "", //截止时间-限时任务
        taskName: "", //任务名称
        ruleName: "", //规则名称-周期任务
        ruleCycle: "", //规则周期-周期任务
        ruleTime: [], //规则时间-周期任务-多选
        ruleTime2: "",
        categoryUserId: [], //参与人id
        projectId: [], //关联项目id
        content: "", //任务详情
        stage: "", //任务阶段
        shareUserId: [], //抄送共享人员id
        startDate: "", //起始日期
        taskRecordList: [],
      },
      // queryParams: {
      //   startAt: '',
      //   endAt: ''
      // },
      //截止时间
      pickerEndTime: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        },
      },
      //开始时间
      pickerStartTime: {
        disabledDate: (time) => {
          if (this.form.endDate) {
            // 设置开始时间大于结束时间
            return time.getTime() > new Date(this.form.endDate).getTime();
          }
        },
      },
      categoryUserName: "", //参与人姓名
      shareUserName: "", //抄送共享人员
      projectName: "", //关联项目名称
      categoryUserArray: [],
      shareUserArray: [],
      proArray: [],
      rules: {
        userId: [
          { required: true, message: "请选择请责任人", trigger: "change" },
        ],
        urgentState: [
          { required: true, message: "请选择紧急状态", trigger: "change" },
        ],
        startDate: [
          { required: true, message: "请选择开始日期", trigger: "change" },
        ],
        endDate: [
          { required: true, message: "请填写截止日期", trigger: "change" },
        ],
        // ruleName: [
        //   { required: true, message: "请填写规则名称", trigger: "blur" },
        // ],
        ruleCycle: [
          { required: true, message: "请填写规则周期", trigger: "change" },
        ],
        // ruleTime: [
        //     { required: true, message: '请填写时间', trigger: 'change' }
        // ],
        // ruleTime2: [
        //     { required: true, message: '请填写时间', trigger: 'change' }
        // ],
        category: [
          { required: true, message: "请选择任务类型", trigger: "change" },
        ],
        categoryUserId: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个参与人",
            trigger: "blur",
          },
        ],
        // shareUserId: [
        //     { type: 'array', required: true, message: '请至少选择一个抄送共享人员', trigger: 'blur' }
        // ],
        projectId: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个项目",
            trigger: "change",
          },
        ],
        stage: [
          { required: true, message: "请选择任务阶段", trigger: "change" },
        ],
        content: [
          { required: true, message: "请填写任务详情", trigger: "blur" },
        ],
        // taskName: [
        //   { required: true, message: "请填写任务名称", trigger: "blur" },
        // ],
      },
      users: [], //负责人列表
      urgentStates: [
        { value: 1, label: "非常紧急" },
        { value: 2, label: "紧急" },
        { value: 3, label: "正常" },
      ],
      taskTypes: [
        //任务类型选择
        { value: 1, label: "限时任务" },
        { value: 2, label: "周期任务" },
      ],
      ruleCycles: [
        //规则周期选择
        { value: "1", label: "天" },
        { value: "2", label: "周" },
        { value: "3", label: "月" },
        { value: "4", label: "年" },
      ],
      ruleDates2: [
        { value: 1, label: "9:00", name: "9:00" },
        { value: 2, label: "10:00", name: "10:00" },
        { value: 3, label: "11:00", name: "11:00" },
        { value: 4, label: "12:00", name: "12:00" },
        { value: 5, label: "13:00", name: "13:00" },
        { value: 6, label: "14:00", name: "14:00" },
        { value: 7, label: "15:00", name: "15:00" },
        { value: 8, label: "16:00", name: "16:00" },
        { value: 9, label: "17:00", name: "17:00" },
        { value: 10, label: "18:00", name: "18:00" },
      ],
      ruleDates: [
        //规则时间选择
        // [
        //     { value: 1, label: '9:00', name: '9:00' },
        //     { value: 2, label: '10:00', name: '10:00' },
        //     { value: 3, label: '11:00', name: '11:00' },
        //     { value: 4, label: '12:00', name: '12:00' },
        //     { value: 5, label: '13:00', name: '13:00' },
        //     { value: 6, label: '14:00', name: '14:00' },
        //     { value: 7, label: '15:00', name: '15:00' },
        //     { value: 8, label: '16:00', name: '16:00' },
        //     { value: 9, label: '17:00', name: '17:00' },
        //     { value: 10, label: '18:00', name: '18:00' },
        // ],
        [
          { value: 1, label: "周一", name: "1" },
          { value: 2, label: "周二", name: "2" },
          { value: 3, label: "周三", name: "3" },
          { value: 4, label: "周四", name: "4" },
          { value: 5, label: "周五", name: "5" },
          { value: 6, label: "周六", name: "6" },
          { value: 7, label: "周日", name: "7" },
        ],
        [
          { value: 1, label: "1号", name: "1" },
          { value: 2, label: "2号", name: "2" },
          { value: 3, label: "3号", name: "3" },
          { value: 4, label: "4号", name: "4" },
          { value: 5, label: "5号", name: "5" },
          { value: 6, label: "6号", name: "6" },
          { value: 7, label: "7号", name: "7" },
          { value: 8, label: "8号", name: "8" },
          { value: 9, label: "9号", name: "9" },
          { value: 10, label: "10号", name: "10" },
          { value: 11, label: "11号", name: "11" },
          { value: 12, label: "12号", name: "12" },
          { value: 13, label: "13号", name: "13" },
          { value: 14, label: "14号", name: "14" },
          { value: 15, label: "15号", name: "15" },
          { value: 16, label: "16号", name: "16" },
          { value: 17, label: "17号", name: "17" },
          { value: 18, label: "18号", name: "18" },
          { value: 19, label: "19号", name: "19" },
          { value: 20, label: "20号", name: "20" },
          { value: 21, label: "21号", name: "21" },
          { value: 22, label: "22号", name: "22" },
          { value: 23, label: "23号", name: "23" },
          { value: 24, label: "24号", name: "24" },
          { value: 25, label: "25号", name: "25" },
          { value: 26, label: "26号", name: "26" },
          { value: 27, label: "27号", name: "27" },
          { value: 28, label: "28号", name: "28" },
          { value: 29, label: "29号", name: "29" },
          { value: 30, label: "30号", name: "30" },
          { value: 31, label: "31号", name: "31" },
        ],
        [
          { value: 1, label: "1月", name: "1" },
          { value: 2, label: "2月", name: "2" },
          { value: 3, label: "3月", name: "3" },
          { value: 4, label: "4月", name: "4" },
          { value: 5, label: "5月", name: "5" },
          { value: 6, label: "6月", name: "6" },
          { value: 7, label: "7月", name: "7" },
          { value: 8, label: "8月", name: "8" },
          { value: 9, label: "9月", name: "9" },
          { value: 10, label: "10月", name: "10" },
          { value: 11, label: "11月", name: "11" },
          { value: 12, label: "12月", name: "12" },
        ],
      ],
      taskStages: [
        //任务阶段选择
        { value: 1, label: "发布" },
        { value: 2, label: "研发中" },
        { value: 3, label: "审核" },
        { value: 4, label: "市场营销" },
        { value: 5, label: "已完成" },
      ],
      dialog1: false, //参与人选择框
      dialog2: false, //关联项目选择框
      treedata: [], //参与人,抄送共享数据源
      parDefaultCheck: [], //参与人,抄送共享默认勾选数组
      proDefaultCheck: [], //项目默认勾选数组
      proTreedata: [], //关联项目数据源
      defaultProps: {
        //自定义树形结构
        children: "userAccounts",
        label: "name",
        // disabled: "userAccounts", //有效果
        // disabled: (data) => {
        //     return data.userAccounts ? true : false
        // },
      },
      parFilterText: "", //过滤
      proFilterText: "", //过滤
      treeType: 1, //选择1.参与人 2.选择抄送共享人
      loading: false,
      commentInput: "", //评论
      taskRecordList: "", //评论列表
      editFlag: "", //任务修改权限 1.可修改
      deleteFlag: "", //是否删除1.已删除
    };
  },
  created() {
    let userInfo = sessionStorage.getItem("userInfo");
    this.userid = JSON.parse(userInfo).id;
    this.getCategoryUser();
    this.getBearList();
    this.getProject();
  },
  methods: {
    //删除评论
    delComment(id) {
      this.$confirm("确定删除这条评论吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delTaskRecord(id).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "删除成功",
                type: "success",
              });
              this.getDetail();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //发布任务评论
    saveComment() {
      let data = {
        taskId: this.taskId,
        content: this.commentInput,
      };
      addTaskRecord(data).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "发布成功",
            type: "success",
          });
          this.commentInput = "";
          this.getDetail();
        }
      });
    },
    //关注任务
    followClick() {
      let data = {
        id: this.taskId,
        followUserId: "1",
      };
      stopOrDeleteTaskInfo(data).then((res) => {
        if (res.code == 0) {
          if (this.followFlag == "0") {
            this.$message({
              message: "已关注",
              type: "success",
            });
          } else {
            this.$message({
              message: "已取消关注",
              type: "success",
            });
          }
          this.getDetail();
        }
      });
    },
    handleClose() {
      this.$refs.ruleForm.resetFields();
    },
    //获取详情信息
    getDetail() {
      getTaskDetail(this.taskId).then((res) => {
        if (res.code == 0) {
          this.form.userId = res.data.userId;
          this.form.urgentState = res.data.urgentState;
          this.form.category = res.data.category;
          this.form.taskName = res.data.taskName;
          this.form.userName = res.data.userName;
          this.form.ruleName = res.data.taskName;
          this.form.endDate = res.data.endDate;
          this.form.startDate = res.data.startDate;
          this.form.ruleCycle = res.data.ruleCycle;
          this.form.ruleTime2 = res.data.ruleTime;
          this.form.ruleTime = (res.data.ruleTime || "").split(",");
          this.categoryUserName = res.data.categoryName;
          this.form.categoryUserId = res.data.categoryUserId.split(",");
          this.categoryUserArray = res.data.categoryName.split(",");
          this.projectName = res.data.projectName;
          this.form.projectId = res.data.projectId.split(",");
          this.proArray = res.data.projectName.split(",");
          this.form.content = res.data.content;
          this.form.stage = res.data.stage;
          this.shareUserName = res.data.shareUserName;
          this.form.shareUserId = res.data.shareUserId.split(",");
          this.shareUserArray = (res.data.shareUserName || "").split(",");
          this.followFlag = res.data.followFlag;
          this.taskRecordList = res.data.taskRecordList;
          this.createUserId = res.data.createUserId;
          this.editFlag = res.data.editFlag;
        }
      });
    },
    //获取参与人
    getCategoryUser() {
      getParticipateUserList().then((res) => {
        if (res.code == 0) {
          this.treedata = res.data;
        }
      });
    },
    //获取项目数据
    getProject() {
      getProjectList().then((res) => {
        if (res.code == 0) {
          this.proTreedata = res.data;
        }
      });
    },
    //获取负责人
    getBearList() {
      getBearUserList().then((res) => {
        if (res.code == 0) {
          this.users = res.data;
        }
      });
    },
    qc() {
      this.$refs["ruleForm"].resetFields();
      this.form = {
        userId: "", //负责人id
        userName: "", //负责人
        urgentState: "", //紧急状态
        category: "", //任务类型
        endDate: "", //截止时间-限时任务
        taskName: "", //任务名称
        ruleName: "", //规则名称-周期任务
        ruleCycle: "", //规则周期-周期任务
        ruleTime: [], //规则时间-周期任务-多选
        ruleTime2: "",
        categoryUserId: [], //参与人id
        projectId: [], //关联项目id
        content: "", //任务详情
        stage: "", //任务阶段
        shareUserId: [], //抄送共享人员id
        startDate: "", //起始日期
      };
      this.categoryUserName = "";
      this.categoryUserArray = [];
      this.shareUserName = "";
      this.shareUserArray = [];
      this.projectName = "";
      this.proArray = [];
    },
    cancel() {
      this.qc();
      this.$emit("cancel");
    },
    changeRuleCycle(val) {
      this.form.ruleTime2 = "";
      this.form.ruleTime = [];
    },
    changeCategory() {
      if (this.form.category) {
        this.$refs["ruleForm"].clearValidate();
      }
    },
    // userChange(val) {
    //     this.users.forEach(i => {
    //         if (i.id == val) {
    //             this.form.userName = i.name
    //         }
    //     })
    // },
    selectBlur(e) {
      if (e.target.value !== "") {
        this.value = e.target.value;
        this.$forceUpdate(); // 强制更新
      }
    },
    selectClear() {
      this.value = "";
      this.$forceUpdate();
    },
    selectChange(val) {
      this.users.forEach((i) => {
        if (i.id == val) {
          this.form.userName = i.name;
        }
      });
    },

    //选择参与人对话框
    selectParticipants() {
      this.treeType = 1;
      this.parDefaultCheck = [];
      // this.form.categoryUserId.forEach(i => {
      //     this.parDefaultCheck.push(i);
      // });
      this.parDefaultCheck = this.form.categoryUserId;
      // console.log(this.form.categoryUserId);
      this.categoryUserName = "";
      this.categoryUserArray = [];
      this.form.categoryUserId = [];
      this.dialog1 = !this.dialog1;
    },
    //选择抄送共享人员
    selectShareMan() {
      this.treeType = 2;
      this.parDefaultCheck = [];
      this.form.shareUserId.forEach((i) => {
        this.parDefaultCheck.push(i);
      });
      this.dialog1 = !this.dialog1;
      this.form.shareUserId = [];
      this.shareUserName = "";
      this.shareUserArray = [];
    },
    //参与人选择-点击节点回调
    // parNodeClick(item, data) {
    //     if (this.treeType == 1) {
    //             if (data.checked == true) {
    //             console.log(data.checked);
    //             this.form.categoryUserId.push(item.id)
    //             this.categoryUserArray.push(item.name)
    //             this.categoryUserName = this.categoryUserArray.join(",")
    //         } else {
    //             this.form.categoryUserId.forEach((i, index) => {
    //                 if (i == item.id) {
    //                     this.form.categoryUserId.splice(index, 1)
    //                 }
    //             });
    //             this.categoryUserArray.forEach((i, index) => {
    //                 if (i == item.name) {
    //                     this.categoryUserArray.splice(index, 1)
    //                 }
    //             });
    //             this.categoryUserName = this.categoryUserArray.join(",")
    //         }
    //     } else {
    //         if (data.checked == true) {
    //             this.form.shareUserId.push(item.id)
    //             this.shareUserArray.push(item.name)
    //             this.shareUserName = this.shareUserArray.join(",")
    //         } else {
    //             this.form.shareUserId.forEach((i, index) => {
    //                 if (i == item.id) {
    //                     this.form.shareUserId.splice(index, 1)
    //                 }
    //             });
    //             this.shareUserArray.forEach((i, index) => {
    //                 if (i == item.name) {
    //                     this.shareUserArray.splice(index, 1)
    //                 }
    //             });
    //             this.shareUserName = this.shareUserArray.join(",")
    //         }
    //     }

    // },
    parCheckChange(item, data) {
      console.log(item);
      console.log(data);
      this.systemNodeFlag = true; //给数节点赋值之前 先设置状态为true
      this.$nextTick(() => {
        this.data; //拿到接口数据，筛选出选中状态的数据添加到数组中
        this.$refs.parTree.setChecked(this.data); //给树节点赋值
        this.systemNodeFlag = false; //重点： 赋值完成后 设置为false
      });
      if (this.treeType == 1) {
        if (data == true) {
          if (item.id != null) {
            this.form.categoryUserId.push(item.id);
            this.categoryUserArray.push(item.name);
          }
          this.categoryUserName = this.categoryUserArray.join(",");
        } else {
          this.form.categoryUserId.forEach((i, index) => {
            if (i == item.id) {
              this.form.categoryUserId.splice(index, 1);
            }
          });
          this.categoryUserArray.forEach((i, index) => {
            if (i == item.name) {
              this.categoryUserArray.splice(index, 1);
            }
          });
          this.categoryUserName = this.categoryUserArray.join(",");
        }
      } else {
        if (data == true) {
          if (item.id != null) {
            this.form.shareUserId.push(item.id);
            this.shareUserArray.push(item.name);
          }
          this.shareUserName = this.shareUserArray.join(",");
        } else {
          this.form.shareUserId.forEach((i, index) => {
            if (i == item.id) {
              this.form.shareUserId.splice(index, 1);
            }
          });
          this.shareUserArray.forEach((i, index) => {
            if (i == item.name) {
              this.shareUserArray.splice(index, 1);
            }
          });
          this.shareUserName = this.shareUserArray.join(",");
        }
      }
    },
    //参与人过滤
    parFilterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    //关联项目选择对话框
    selectProject() {
      this.proDefaultCheck = [];
      this.form.projectId.forEach((i) => {
        this.proDefaultCheck.push(i);
      });
      this.dialog2 = !this.dialog2;
      this.form.projectId = [];
      this.projectName = "";
      this.proArray = [];
    },
    //关联项目选择-点击节点回调
    // proNodeClick(item, data) {
    //     if (data.checked == true) {
    //         this.form.projectId.push(item.id)
    //         this.proArray.push(item.name)
    //         this.projectName = this.proArray.join(",")
    //     } else {
    //         this.form.projectId.forEach((i, index) => {
    //             if (i == item.id) {
    //                 this.form.projectId.splice(index, 1)
    //             }
    //         });
    //         this.proArray.forEach((i, index) => {
    //             if (i == item.name) {
    //                 this.proArray.splice(index, 1)
    //             }
    //         });
    //         this.projectName = this.proArray.join(",")
    //     }
    // },
    parCheckChange2(item, data) {
      if (data == true) {
        this.form.projectId.push(item.id);
        this.proArray.push(item.name);
        this.projectName = this.proArray.join(",");
      } else {
        this.form.projectId.forEach((i, index) => {
          if (i == item.id) {
            this.form.projectId.splice(index, 1);
          }
        });
        this.proArray.forEach((i, index) => {
          if (i == item.name) {
            this.proArray.splice(index, 1);
          }
        });
        this.projectName = this.proArray.join(",");
      }
    },
    //关联项目过滤
    proFilterNode(value, data) {
      if (!value) return true;
      return data.name.indexOf(value) !== -1;
    },

    parCancel() {
      // if (this.treeType == 1) {
      //     this.categoryUserName = '';
      //     this.categoryUserArray = [];
      //     this.form.categoryUserId = [];
      // } else if (this.treeType == 2) {
      //     this.form.shareUserId = [];
      //     this.shareUserName = '';
      //     this.shareUserArray = [];
      // }
      this.parDefaultCheck = [];
      this.dialog1 = !this.dialog1;
    },
    proCancel() {
      // this.form.projectId = [];
      // this.projectName = '';
      // this.proArray = [];
      this.proDefaultCheck = [];
      this.dialog2 = !this.dialog2;
    },
    parOk() {
      if (this.treeType == 1 && this.categoryUserArray.length != 0) {
        this.$refs["ruleForm"].clearValidate(["categoryUserId"]); //清除校验
      }
      if (this.treeType == 2 && this.shareUserArray.length != 0) {
        this.$refs["ruleForm"].clearValidate(["shareUserId"]);
      }
      this.parDefaultCheck = [];
      this.dialog1 = !this.dialog1;
    },
    proOk() {
      if (this.proArray.length != 0) {
        this.$refs["ruleForm"].clearValidate(["projectId"]);
      }
      this.proDefaultCheck = [];
      this.dialog2 = !this.dialog2;
    },
    //提交任务
    submitTask(formName) {
      this.loading = true;
      this.$refs[formName].validate((valid) => {
        console.log("this.form.ruleCycle",this.form);
        if (valid && this.form.ruleCycle != "1") {
          console.log("周期");
          let data = {
            id: this.taskId,
            category: this.form.category,
            userId: this.form.userId,
            userName: this.form.userName,
            categoryUserId: this.form.categoryUserId.join(","),
            categoryName: this.categoryUserName,
            projectId: this.form.projectId.join(","),
            projectName: this.projectName,
            content: this.form.content,
            urgentState: this.form.urgentState,
            stage: this.form.stage,
            shareUserId: this.form.shareUserId.join(","),
            shareUserName: this.shareUserName,
            startDate: this.form.startDate,
            taskName: this.form.taskName,
            ruleName: this.form.taskName,
            ruleCycle: this.form.ruleCycle,
            ruleTime: this.form.ruleTime.join(","),
            endDate: this.form.endDate,
          };
          if (this.taskId == "") {
            // if (this.form.userId == '') {
            //     this.$message({
            //         message: '请选择负责人',
            //         type: 'warning'
            //     });
            // } else if (this.form.urgentState == '') {
            //     this.$message({
            //         message: '请选择紧急程度',
            //         type: 'warning'
            //     });
            // } else if (this.form.category == 2 && this.form.ruleCycle == '') {
            //     this.$message({
            //         message: '请选择规则周期',
            //         type: 'warning'
            //     });
            // } else if (this.form.category == 2 && this.form.ruleTime == '') {
            //     this.$message({
            //         message: '请选择规则时间',
            //         type: 'warning'
            //     });
            // } else {
            addTaskInfo(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
                this.qc();
                this.$emit("submitTask");
                this.reload(); // 需要刷新页面
              } else {
                this.$message({
                  message: res.message,
                  type: "error",
                });
              }
            });
            // }
          } else {
            editTaskInfo(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
                this.qc();
                this.$emit("submitTask");
                this.reload(); // 需要刷新页面
              }
            });
          }
          this.loading = false;
        } else if (valid && this.form.ruleCycle == "1") {
          console.log("限时");
          let data = {
            id: this.taskId,
            category: this.form.category,
            userId: this.form.userId,
            userName: this.form.userName,
            categoryUserId: this.form.categoryUserId.join(","),
            categoryName: this.categoryUserName,
            projectId: this.form.projectId.join(","),
            projectName: this.projectName,
            content: this.form.content,
            urgentState: this.form.urgentState,
            stage: this.form.stage,
            shareUserId: this.form.shareUserId.join(","),
            shareUserName: this.shareUserName,
            startDate: this.form.startDate,
            taskName: this.form.taskName,
            ruleName: this.form.taskName,
            ruleCycle: this.form.ruleCycle,
            ruleTime: this.form.ruleTime2,
            endDate: this.form.endDate,
          };
          if (this.taskId == "") {
            if (this.form.userId == "") {
              this.$message({
                message: "请选择负责人",
                type: "warning",
              });
            } else if (this.form.urgentState == "") {
              this.$message({
                message: "请选择紧急程度",
                type: "warning",
              });
            } else if (this.form.category == 2 && this.form.ruleCycle == "") {
              this.$message({
                message: "请选择规则周期",
                type: "warning",
              });
            } else if (this.form.category == 2 && this.form.ruleTime2 == "") {
              this.$message({
                message: "请选择规则时间",
                type: "warning",
              });
            } else {
              addTaskInfo(data).then((res) => {
                if (res.code == 0) {
                  this.$message({
                    message: res.message,
                    type: "success",
                  });
                  this.qc();
                  this.$emit("submitTask");
                  this.reload(); // 需要刷新页面
                }
              });
            }
          } else {
            editTaskInfo(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: res.message,
                  type: "success",
                });
                this.qc();
                this.$emit("submitTask");
                this.reload(); // 需要刷新页面
              }
            });
          }
          this.loading = false;
        } else {
          this.loading = false;
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.parDialog {
  display: flex;
}

.parDialog-tree {
  width: 50%;
  padding: 0 10px 0 10px;
}

.parDialog-select {
  width: 50%;
}

.people {
  width: 100%;
  padding: 5px;
  display: flex;
  flex-flow: wrap;
}

.people-width {
  width: 50%;
  margin-bottom: 5px;
}

.dialog-footer {
  .dialogTitle {
    line-height: 40px;
    font-size: 24px;

    .i1 {
      font-size: 16px;
      color: red;
      line-height: 40px;
      cursor: pointer;
    }

    .i2 {
      font-size: 16px;
      color: rgb(0, 136, 255);
      line-height: 40px;
      cursor: pointer;
    }
  }

  .comment {
    padding: 0 15px 20px 15px;

    .commentInput {
      display: flex;
    }

    .commentList {
      padding: 5px;

      .listHeader {
        font-size: 14px;
        font-weight: 500;
        display: flex;

        >div {
          margin-right: 10px;
        }

        >i {
          color: red;
          display: flex;
          margin: auto 5px;
          cursor: pointer;
        }
      }

      .listContent {
        padding: 5px;
        text-align: left;
        border-bottom: 1px black dashed;
      }
    }
  }
}

.buttonCl {
  font-size: 16px;
  background-color: white;
  border: 0;
}
</style>
<style lang="scss">
.taskdialog .el-dialog__body {
  padding: 0px 25px !important;
}
</style>
